<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="tops">
			<view class="tops_items" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
				<image :src="item.icon" mode=""></image>
				<view class="name">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="bottoms">
			<scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore">

				<view class="recommend_content_all">
					<view class="bottoms_items" v-for="(item, index) in list" :key="index" @click="toClick(item.id)">
						<image :src="item.image" mode="widthFix"></image>
						<view class="name">
							{{ item.name }}
						</view>
						<view class="bottom">
							<view class="price">
								{{ item.price }}
							</view>
							<view class="des">
								<view class="title"
									:style="{ backgroundColor: item.price == '0.00' ? 'rgba(55,147,245)' : 'red' }">
									{{ item.price == '0.00' ? '积分兑换' : '积分折扣' }}
								</view>
								<view class="salesQuantity">
									已拼{{ item.salesQuantity || 0 }}单
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="zanwu" v-if="list.length == 0">暂无数据</view>
				<u-loadmore v-if="list.length != 0" fontSize="25" :status="status" />
			</scroll-view>
		</view>
	</view>
</template>
<script>
import {
	systemInfo
} from '../../utils/mixin'
import {
	listMallConfig,
	mallProductList
} from '@/api/index.js'
import config from '@/config/config.js'
export default {
	components: {

	},
	mixins: [systemInfo],
	data() {
		return {
			navList: [],

			list: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			status: 'loadmore',
			triggered: false,
			downRefresh: false,
			pageCount: 0,
		}
	},
	onLoad() {


	},
	onShow() {
		// 状态栏高度
		this.getSystemInfo();
		this.getNav();

		this.triggered = true;
		this.downRefresh = true
		this.queryParams.pageNum = 1
		this.list = []
		this.getcollectList()
	},
	methods: {
		async getNav() {
			const res = await listMallConfig({})
			res.data.forEach(element => {
				element.icon = config.pic_prefixs + element.icon
			});
			this.navList = res.data
		},

		// nav点击事件
		navClick(item) {
			uni.navigateTo({
				url: "/subpackage3/shop/shopList?title=" + item.name + '&id=' + item.id
			})
		},

		toClick(id) {
			uni.navigateTo({
				url: "/subpackage3/shop/productDetail?id=" + id
			})
		},

		async getcollectList() {
			const res = await mallProductList({
				...this.queryParams
			})
			this.pageCount = res.total
			res.rows.forEach(element => {
				element.image = config.pic_prefixs + element.image
			});
			//停止加载中
			this.triggered = false;
			this.downRefresh = false
			//处理完逻辑停止刷新
			uni.stopPullDownRefresh();
			if (this.list.length >= this.pageCount) {
				this.status = 'nomore';
			} else {
				let arr = [...this.list, ...res.rows]
				this.list = arr
				if (res.rows.length < 10) {
					this.status = 'nomore';
				}
			}
		},

		//触底加载
		lowerBottom() {
			if (this.queryParams.pageNum < this.pageCount) {
				if (!this.downRefresh) {
					this.downRefresh = true
					this.status = 'loading';
					this.queryParams.pageNum += 1
					this.getcollectList()
				}
			}
		},
		onRefresh() {
			this.triggered = true;
			this.downRefresh = true
			this.queryParams.pageNum = 1
			this.list = []
			this.getcollectList()
		},
		onRestore() {
			this.triggered = false; // 需要重置
		},
	}
}
</script>
<style lang="less" scoped>
.content {
	width: 100%;
	box-sizing: border-box;
	background-color: rgb(245, 245, 245);

	.tops {
		width: calc(100% - 60rpx);
		// height: calc(100% - 60rpx);
		height: 400rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		margin: auto;
		overflow: auto;
		border-radius: 15px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;

		.tops_items {
			width: 25%;
			height: 120rpx;
			text-align: center;

			image {
				width: 40px;
				height: 40px;
			}

			.name {
				font-size: 30rpx;
			}
		}
	}

	.bottoms {
		width: calc(100% - 60rpx);
		height: calc(100% - 460rpx);
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 15px;
		background-color: #fff;
		margin: 30rpx auto 0;
		overflow-y: auto;
		overflow-x: hidden;


		.box_scroll {
			height: 100%;
			width: 100%;


			.recommend_content_all {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
		}


		.bottoms_items {
			width: calc(50% - 20rpx);
			margin-bottom: 20rpx;

			image {
				width: 100%;
			}

			.name {
				width: 100%;
				text-align: left;
				font-size: 30rpx;
				overflow: hidden; // 溢出的内容隐藏
				text-overflow: ellipsis; // 溢出的部分用省略号...显示
				-webkit-line-clamp: 2; // 行数
				display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 
				-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
			}

			.bottom {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					font-size: 30rpx;
					color: red;
				}

				.des {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #fff;
					height: 40rpx;
					line-height: 40rpx;

					.title {
						text-align: center;
						padding: 0 5rpx;
						border-top-left-radius: 10rpx;
						border-bottom-left-radius: 10rpx;
					}

					.salesQuantity {
						color: #b3adad;
						text-align: center;
						padding: 0 5rpx;
						background-color: rgba(235, 235, 235);
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
					}
				}
			}

			.zanwu {
				font-size: 30rpx;
				color: #b3adad;
				text-align: center;
				margin-top: 20px;
			}
		}
	}
}
</style>